<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>美寇商城首页</title>
</head>
<body>
    <div class="contianer">
        <!-- // 轮播图 -->
        <div class="banner">
            <img src="./img/banner.png" alt="" class="bnanerImg">
            <input type="text" placeholder="搜索..." class="search">
        </div>
        <!-- // 商品分类 -->
        <div class="category">
            <div class="category_1" style="background-color: #F9F6F0;">
                <img src="./img/category_01.png" alt="" style="width: 42px;height: 42px;">
                <p class="category_text">气质女装</p>
            </div>
            <div class="category_1" style="background-color: #F9EDEF;">
                <img src="./img/category_02.png" alt="" style="width: 42px;height: 42px;">
                <p class="category_text">箱包手袋</p>
            </div>
            <div class="category_1" style="background-color: #DEDEE6;">
                <img src="./img/category_03.png" alt="" style="width: 42px;height: 42px;">
                <p class="category_text">潮流男装</p>
            </div>
            <div class="category_1" style="background-color: #F0F8F8;">
                <img src="./img/category_04.png" alt="" style="width: 42px;height: 42px;">
                <p class="category_text">时尚饰品</p>
            </div>
        </div>

        <!-- 特惠推荐 -->
         <div class="recommend">
            <img src="./img/recommend_text'.png" alt="" style="height:20 px;width: 150px;margin: 11px 8px 11px 8px;">
            <div class="recommend_context">
                <img src="./img/recommend_icon.png" alt="" style="height: 116px;">
                <div class="recommend_goods">
                    <img src="./img/re_goods_1.png" alt="" style="height: 70px;width: 70px;">
                    <p class="goods_price">￥ 117</p>
                </div>
                <div class="recommend_goods">
                    <img src="./img/re_goods_2.png" alt="" style="height: 70px;width: 70px;">
                    <p class="goods_price">￥ 109</p>
                </div>
                <div class="recommend_goods">
                    <img src="./img/re_goods_3.png" alt="" style="height: 70px;width: 70px;">
                    <p class="goods_price">￥ 288</p>
                </div>
            </div>
         </div>

         <!-- 爆款推荐 -->
          <div class="popular">
            <!-- 最受欢迎 -->
             <div class="popular_1" style="background-color: #EDF1FB;">
                <div style="margin-bottom: 6px;">
                <span style="font-size: 14px;font-weight: 900;color: #434343;line-height: 22px;margin-right: 10px;">爆款推荐</span>
                <span style="font-size: 11px;font-weight: 700;color: #6C6C6C;line-height: 22px;">最受欢迎</span>
                </div>
                <div class="po_goods">
                    <div class="po_good">
                        <img src="./img/po_goods_01.png" alt="" style="height: 55px;width: 55px;">
                        <p style="font-size: 12px;color: #FF4B61;font-weight: 500;line-height: 12px;margin-bottom: 4px;">￥423</p>
                        <p class="po_title">立减90</p>
                    </div>
                    <div class="po_good">
                        <img src="./img/po_goods_02.png" alt="" style="height: 55px;width: 55px;margin-bottom: 8px;">
                        <p style="font-size: 12px;color: #FF4B61;font-weight: 500;line-height: 12px;margin-bottom: 4px;">￥423</p>
                        <p class="po_title">立减90</p>
                    </div>
                </div>
                
             </div>

             <div class="popular_1" style="background-color: #FCF6EA;">
                <div style="margin-bottom: 6px;">
                <span style="font-size: 14px;font-weight: 900;color: #434343;line-height: 22px;margin-right: 10px;">一站买全</span>
                <span style="font-size: 11px;font-weight: 700;color: #6C6C6C;line-height: 22px;">精心优选</span>
                </div>
                <div class="po_goods">
                    <div class="po_good">
                        <img src="./img/po_goods_01.png" alt="" style="height: 55px;width: 55px;">
                        <p style="font-size: 12px;color: #FF4B61;font-weight: 500;line-height: 12px;margin-bottom: 4px;">￥411</p>
                        <p class="po_title">立减90</p>
                    </div>
                    <div class="po_good">
                        <img src="./img/po_goods_02.png" alt="" style="height: 55px;width: 55px;">
                        <p style="font-size: 12px;color: #FF4B61;font-weight: 500;line-height: 12px;margin-bottom: 4px;">￥257</p>
                        <p class="po_title">立减90</p>
                    </div>
                </div>
                
             </div>
          </div>

          <!-- 新鲜好物 -->
          <div class="fresh_goods">
            <img src="./img/fresh_title.png" alt="" style="height: 19px;width: 146px;margin-left: 8px;margin-bottom: 8px;">
            <div style="display: flex; flex-direction: row; justify-content: space-between;">
                <div class="fresh_good">
                    <img src="./img/fre_good_01.png" style="width:60px ;height: 60px;margin-bottom: 12px;" alt="">
                    <p class="fre_good_text">￥289</p>

                </div>
                <div class="fresh_good">
                    <img src="./img/fre_good_02.png" style="width:60px ;height: 60px;margin-bottom: 12px;" alt="">
                    <p class="fre_good_text">￥289</p>

                </div>  
                <div class="fresh_good">
                    <img src="./img/fre_good_03.png" style="width:60px ;height: 60px;margin-bottom: 12px;" alt="">
                    <p class="fre_good_text">￥289</p>

                </div>  
                <div class="fresh_good">
                    <img src="./img/fre_good_04.png" style="width:60px ;height: 60px;margin-bottom: 12px;" alt="">
                    <p class="fre_good_text">￥289</p>

                </div>    
            </div>
        
        
        </div> 


        <div class="goods">

        </div>
        <div class="tabs">
            <div class="tabItem">
                <img src="./img/tabs_01.png" alt="" style="width: 28px;height: 28px;margin-bottom: 5px;">
                <p style="font-size: 11px; font-weight: 400; color: #191919;line-height: 14px;">首页</p>
            </div>
            <div class="tabItem">
                <img src="./img/tabs_02.png" alt="" style="width: 28px;height: 28px;margin-bottom: 5px;">
                <p style="font-size: 11px; font-weight: 400; color: #191919;line-height: 14px;">分类</p>
            </div>
            <div class="tabItem">
                <img src="./img/tabs_03.png" alt="" style="width: 28px;height: 28px;margin-bottom: 5px;">
                <p style="font-size: 11px; font-weight: 400; color: #191919;line-height: 14px;">购物袋</p>
            </div>
            <div class="tabItem">
                <img src="./img/tabs_04.png" alt="" style="width: 28px;height: 28px;margin-bottom: 5px;">
                <p style="font-size: 11px; font-weight: 400; color: #191919;line-height: 14px;">我的</p>
            </div>
        </div>
    </div>
    
</body>
</html>